<template>
  <div class="app-container">
    <!-- 货品详情 -->
    <el-row style="margin-top: -20px;">
      <el-col :span="24">
        <div class="grid-content bg-purple-dark grid-huoqu">
          <div class="region">
            <header class="region_header">
              <h1 class="region_title">货品详情</h1>
            </header>
            <div class="region_details">
              <div class="details">
                <!-- 此处是货位缝补情况 -->
                <el-row :gutter="15">
                  <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
                    <el-col :span="12">
                      <el-form-item label="入库时间" prop="field101">
                        <el-time-picker v-model="formData.field101" format="HH:mm:ss" value-format="HH:mm:ss"
                          :picker-options='{ "selectableRange": "00:00:00-23:59:59" }' :style="{ width: '100%' }"
                          placeholder="请选择入库时间" clearable :disabled="isDisabled"></el-time-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="出库时间" prop="field102">
                        <el-time-picker v-model="formData.field102" format="HH:mm:ss" value-format="HH:mm:ss"
                          :picker-options='{ "selectableRange": "00:00:00-23:59:59" }' :style="{ width: '100%' }"
                          placeholder="请选择出库时间" clearable :disabled="isDisabled"></el-time-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="货品名称" prop="field106">
                        <el-input v-model="formData.field106" placeholder="请输入货品名称" clearable :style="{ width: '100%' }"
                          :disabled="isDisabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="货品批号" prop="field107">
                        <el-input v-model="formData.field107" placeholder="请输入货品批号" clearable :style="{ width: '100%' }"
                          :disabled="isDisabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="货品规格" prop="field108">
                        <el-input v-model="formData.field108" placeholder="请输入货品规格" clearable :style="{ width: '100%' }"
                          :disabled="isDisabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="入库人员" prop="field112">
                        <el-input v-model="formData.field112" placeholder="请输入入库人员" clearable :style="{ width: '100%' }"
                          :disabled="isDisabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="审核人员" prop="field113">
                        <el-input v-model="formData.field113" placeholder="请输入审核人员" clearable :style="{ width: '100%' }"
                          :disabled="isDisabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="货品单号" prop="field114">
                        <el-input v-model="formData.field114" placeholder="请输入货品单号" clearable :style="{ width: '100%' }"
                          :disabled="isDisabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="备注信息1" prop="field110">
                        <el-input v-model="formData.field110" type="textarea" placeholder="请输入备注信息1"
                          :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"
                          :disabled="isDisabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="备注信息2" prop="field111">
                        <el-input v-model="formData.field111" type="textarea" placeholder="请输入备注信息2"
                          :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"
                          :disabled="isDisabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <!-- <el-col :span="24">
                      <el-form-item size="large">
                        <el-button type="primary" @click="submitForm" :disabled="isDisabled">提交</el-button>
                        <el-button @click="resetForm">重置</el-button>
                      </el-form-item>
                    </el-col> -->
                  </el-form>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      isDisabled: true, // 用于控制禁用状态
      formData: {
        // field101: '13:11:02',
        // field102: '16:16:02',
        // field106: undefined,
        // field107: undefined,
        // field108: undefined,
        // field112: undefined,
        // field113: undefined,
        // field114: undefined,
        // field110: undefined,
        // field111: undefined,
        field101: '13:11:02',
        field102: '16:16:02',
        field106: '盐酸利多卡因注射液',
        field107: 20240906,
        field108: '5ml_0.1g_盒5支',
        field112: '张三',
        field113: '李四',
        field114: 'hd202409068367859',
        field110: undefined,
        field111: undefined,
        // 盐酸利多卡因注射液
      },
      rules: {
        field101: [],
        field102: [],
        field106: [],
        field107: [],
        field108: [],
        field112: [],
        field113: [],
        field114: [],
        field110: [],
        field111: [],
      },
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>

<!-- Layout布局样式，结构样式 -->
<style scoped>
/* .app-container {} */

.el-row {
  margin-bottom: 10px;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  /* background-color: rgba(146, 141, 141, 0.22); */
  background: rgb(245, 245, 245);
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

<!-- 顶部Cards栏样式 -->
<style scoped>
/* 移除所有ul和ol列表的小黑点 */
ul,
ol {
  list-style: none;
}

.info-wrapper {
  margin: 5px;
}

.cards {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0px;
  min-width: 1014px;
  width: 100%;
  /* background: rgb(245, 245, 245); */
}

.cards .card {
  position: relative;
  cursor: pointer;
  width: 185px;
  height: 85px;
  background: rgb(255, 255, 255);
  box-shadow: rgba(186, 186, 186, 0.22) 0px 8px 36px 4px;
  border-radius: 5px;
  padding: 15px;
  margin: 10px;
}

/* .card {
  border: 2px solid rgba(186, 186, 186, 0.22) 0px 8px 36px 4px;
  box-shadow: rgba(186, 186, 186, 0.22) 0px 8px 36px 4px;
} */

.fbet {
  display: flex;
  justify-content: space-between;
}

.cards .card_icon {
  display: grid;
  place-items: center;
  /* 同时实现水平和垂直居中 */
  width: 50px;
  height: 50px;
  margin-top: 8px;
  /* padding: 11.5px; */
  border-radius: 20px;
}

.cards .card_icon img {
  width: 36px;
  height: 36px;
}

.cards .card_icon_bg1 {
  background: rgb(233, 235, 255);
}

.cards .card_icon_bg2 {
  background: #ffe6e0;
}

.cards .card_icon_bg3 {
  background: #e6fbf2;
}

.cards .card_icon_bg4 {
  background: #fff4ee;
}

.cards .card_icon_bg5 {
  background: #e6fbf2;
}

.cards .card_icon_bg6 {
  background: #e9ebff;
  border-radius: 20px;
}

.cards .card_icon_bg7 {
  background: #dbedff;
}

.cards .card_icon_bg8 {
  background: #f5f5f5;
}

.cards .card_icon_bg9 {
  background: #e6fbf2;
}

.cards .card_number {
  text-align: left;
  color: rgb(51, 51, 51);
  display: block;
  line-height: 45px;
  font-size: 30px;
  font-family: Arial;
  font-weight: bold;
}

.cards .card_title {
  text-align: left;
  display: block;
  color: rgb(102, 102, 102);
  font-family: "Microsoft YaHei";
  font-size: 14px;
}
</style>

<!-- 使用货位样式 -->
<style scoped>
.grid-huoqu {
  padding: 10px;
}

.region {
  border-radius: 5px;
  border: 1px solid rgb(255, 255, 255);
  background: rgb(255, 255, 255);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

}

.region_header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f4f7;
  /* background-color: #ffeb3b; */
}

.region_title {
  flex: 1;
  font-size: 20px;
  font-weight: 400;
  color: #333;
  display: flex;
  align-items: center;
  padding-left: 12px;
  line-height: 20px;
  /* 保持标题垂直居中 */
  position: relative;
  /* 使用伪元素 */
}

.region_title:before {
  content: "";
  background: #0362fa;
  display: inline-block;
  width: 4px;
  height: 20px;
  margin-right: 10px;
}

.region_details {
  min-height: 100px;
  /* background-color: #dda0dd; */
}

.details {
  /* background-color: pink; */
  padding: 20px;
  border-radius: 5px;
  margin-top: 10px;
}
</style>